<template>
	<div v-cloak id="loginForm">
      <div class="login-back" >
        <div class="login-background"></div>
        <div class="login-box">
          <el-row>
            <el-col class="el-col-box"  style="width:520px;margin-left:50%;t">
              <div class="login-title">
                <i class="el-icon-share" style="font-size:100px;color:#1890ff;margin-bottom:20px;" />  
                <h1>客户关系管理系统</h1>
                <p>Customer Relationship Management</p>
              </div>
              <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
                <el-form-item prop="username">
                  <span class="svg-container">
                    <i class="el-icon-user-solid" style="font-size:20px;line-height:36px"></i>
                  </span>
                  <el-input
                    ref="username"
                    v-model="loginForm.username"
                    placeholder="Username"
                    name="username"
                    type="text"
                    tabindex="1"
                    autocomplete="on"
                  />
                </el-form-item>
                <el-form-item prop="password">
                  <span class="svg-container">
                    <i class="icon element-icons icon-third-suo" style="font-size:20px;line-height:36px"></i>
                  </span>
                  <el-input
                    ref="password"
                    v-model="loginForm.password"
                    :type="passwordType"
                    placeholder="Password"
                    name="password"
                    tabindex="2"
                    autocomplete="on"
                    @keyup.enter.native="handleLogin"
                  />
                  <span class="show-pwd" @click="showPwd">
                    <i class="icon element-icons" style="font-size: 22px;line-height:36px;color:#000;" :class="passwordType === 'password' ? 'icon-third-yanjing_yincang_o' : 'icon-third-yanjing_xianshi_o'"></i>
                  </span>
                </el-form-item>
                <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;font-size:24px;" @click.native.prevent="handleLogin">登录</el-button>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

</template>

<script>
export default {
  data () {
    return {
      loginForm: { //登录账号密码
        username: '',
        password: ''
      },
      loginRules: { //验证规则
        username: [{ required: true, message: '请输入用户名', trigger: ['change','blur']}],
        password: [{ required: true, message: '请输入密码', trigger: ['change','blur']}]
      },
      menu: [ //暂时静态数据，需后台返回
        {
          url: "",
          icon: "icon-third-caidan1",
          name: "首页",
          code: '1',
          order: 0,
          view: true,
          children: [
            { url: "/index", name: "首页报表", view: true, order: 0, code: '43' }
          ]
        },
        {
          url: "",
          icon: "el-icon-c-scale-to-original",
          name: "EC机器人",
          code: '2',
          order: 0,
          view: true,
          children: [
            { url: "/ecRobotList", name: "全部", view: true, order: 0, code: '21' },
            { url: "/myRobotList", name: "我负责", view: true, order: 0, code: '22' },
          ]
        },
        {
          url: "",
          icon: "el-icon-s-opportunity",
          name: "智库",
          code: '3',
          order: 0,
          view: true,
          children: [
            { url: "/zkRegister", name: "注册", view: true, order: 0, code: '31' }
          ]
        },
        {
          url: "",
          icon: "icon-third-msnui-ad",
          name: "商机",
          code: '4',
          order: 0,
          view: true,
          children: [
            { url: "/allOpportList", name: "全部商机", view: true, order: 0, code: '41' },
            { url: "/teamOpportList", name: "团队", view: true, order: 0, code: '42' },
            { url: "/myOpportList", name: "我负责的商机", view: true, order: 0, code: '43' },
            { url: "/mysetOpportList", name: "我创建的商机", view: true, order: 0, code: '44' },
            { url: "/departOpportList", name: "部门", view: true, order: 0, code: '45' },

          ]
        },
        {
          url: "",
          icon: "el-icon-s-order",
          name: "合同",
          code: '5',
          order: 0,
          view: true,
          children: [
            { url: "/allContractList", name: "全部合同", view: true, order: 0, code: '51' },
            { url: "/myContractList", name: "我负责", view: true, order: 0, code: '52' },
            { url: "/teamContractList", name: "所在团队", view: true, order: 0, code: '53' },
            { url: "/mySetContractList", name: "我创建", view: true, order: 0, code: '54' },
            { url: "/departContractList", name: "我部门", view: true, order: 0, code: '55' },
            { url: "/revokeContractList", name: "撤户", view: true, order: 0, code: '56' },
          ]
        },
        {
          url: "",
          icon: "el-icon-s-custom",
          name: "客户管理",
          code: '6',
          order: 0,
          view: true,
          children: [
            { url: "/allCustomerList", name: "全部客户", view: true, order: 0, code: '61' },
            { url: "/teamCustomerList", name: "团队", view: true, order: 0, code: '62' },
            { url: "/myCustomerList", name: "我负责的客户", view: true, order: 0, code: '63' },
            { url: "/mysetCustomerList", name: "我创建的客户", view: true, order: 0, code: '64' },
            { url: "/departCustomerList", name: "部门", view: true, order: 0, code: '65' },
          ]
        },
        {
          url: "",
          icon: "el-icon-s-finance",
          name: "账务管理",
          scopedSlots: { title: 'custom' },
          code: '13',
          order: 0,
          view: true,
          children: [
            { url: "/allCreditList", name: "记账任务", view: true, order: 0, code: '67' },
            { url: "/oneCreditList", name: "一次性任务", view: true, order: 0, code: '968' }
          ]
        },
        {
          url: "",
          icon: "el-icon-coin",
          name: "财务管理",
          code: '7',
          order: 0,
          view: true,
          children: [
            { url: "/receivableList", name: "应收", view: true, order: 0, code: '81' },
            { url: "/receivablesList", name: "收款记录", view: true, order: 0, code: '82' },
            { url: "/refundList", name: "退款记录", view: true, order: 0, code: '89' },
            { url: "/claimList", name: "认领记录", view: true, order: 0, code: '83' },
            { url: "/expenditureList", name: "支出记录", view: true, order: 0, code: '84' },
            { url: "/invoiceList", name: "开票", view: true, order: 0, code: '85' },
            { url: "/revokeList", name: "撤户退款", view: true, order: 0, code: '86' },

          ]
        },
        {
          url: "",
          icon: "icon-third-huiyuan",
          name: "绩效管理",
          code: '8',
          order: 0,
          view: true,
          children: [
            { url: "/qiandanList", name: "签单绩效", view: true, order: 0, code: '96' },
            { url: "/fuwuList", name: "服务绩效", view: true, order: 0, code: '97' },
            { url: "/userList", name: "员工绩效", view: true, order: 0, code: '98' }
          ]
        },
        {
          url: "",
          icon: "el-icon-s-marketing",
          name: "报表",
          code: '9',
          order: 0,
          view: true,
          children: [
            { url: "/effectiveIncome", name: "有效收入", view: true, order: 0, code: '101' },
            { url: "/accountService", name: "代账服务", view: true, order: 0, code: '102' },
            { url: "/taskProgress", name: "任务进度", view: true, order: 0, code: '103' },
            { url: "/receiptStatistics", name: "日记账月记账", view: true, order: 0, code: '104' },
            { url: "/revokeInformation", name: "撤户信息", view: true, order: 0, code: '105' },
            { url: "/dunning", name: "催缴代理费记录", view: true, order: 0, code: '106' },
            { url: "/arrearsAgent", name: "欠费统计", view: true, order: 0, code: '107' },
          ]
        },
        {
          url: "",
          icon: "el-icon-s-tools",
          name: "设置管理",
          code: '10',
          order: 0,
          view: true,
          children: [
            // { url: "/menu", title: "菜单管理", view: true, order: 0, key: '111' },
            { url: "/productType", name: "产品类目", view: true, order: 0, code: '112' },
            { url: "/serverProductType", name: "服务商产品分类", view: true, order: 0, code: '116' },
            { url: "/product", name: "服务商产品", view: true, order: 0, code: '113' },
            { url: "/user", name: "用户管理", view: true, order: 0, code: '114' },
            { url: "/payType", name: "支出类目", view: true, order: 0, code: '119' },
            { url: "/companyType", name: "企业类型", view: true, order: 0, code: '120' },
            { url: "/tradeType", name: "行业分类", view: true, order: 0, code: '121' },
            { url: "/channelList", name: "渠道", view: true, order: 0, code: '122' },
            { url: "/invalidReason", name: "作废原因", view: true, order: 0, code: '128' },
            { url: "/trendsReason", name: "动态原因", view: true, order: 0, code: '129' },

          ]
        },
        {
          url: "",
          icon: "icon-third-gongsi",
          name: "服务商管理",
          code: '11',
          order: 0,
          view: true,
          children: [
            { url: "/serviceList", name: "服务商列表", view: true, order: 0, code: '181' },
          ]
        },
        {
          url: "",
          icon: "icon-third-yanjing_xianshi_o",
          name: "费用申报",
          code: '12',
          order: 0,
          view: true,
          children: [
            { url: "/costList", name: "费用报销", view: true, order: 0, code: '191' }
          ]
        },
      ],
      loading: false, //loading提示
      passwordType: 'password' //是否显示密码
    }
  },
  methods: {
    showPwd() { //切换是否显示密码
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() { //点击登录
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          // 请求事件
          this.$post(this.$api.login,{
            username: this.loginForm.username,//编号
            password: this.loginForm.password,//名称
          }).then(response => {
            if (response.data.succeed) {
              if (response.data.data.menuList.length == 0) {
                this.$alert('改用户角色下没有功能权限！','提示')
                return false
              }
              let buttonData = []
              if (response.data.data.buttonList.k051) {
                response.data.data.buttonList.k051.forEach(el=>{
                  buttonData.push(el.id)
                })
              }
              if (response.data.data.buttonList.k011) {
                response.data.data.buttonList.k011.forEach(el=>{
                  buttonData.push(el.id)
                })
              }
              if (response.data.data.buttonList.k017) {
                response.data.data.buttonList.k017.forEach(el=>{
                  buttonData.push(el.id)
                })
              }
              if (response.data.data.buttonList.k040) {
                response.data.data.buttonList.k040.forEach(el=>{
                  buttonData.push(el.id)
                })
              }
              if (response.data.data.buttonList.k005) {
                response.data.data.buttonList.k005.forEach(el=>{
                  buttonData.push(el.id)
                })
              }
              if (response.data.data.buttonList.k032) {
                response.data.data.buttonList.k032.forEach(el=>{
                  buttonData.push(el.id)
                })
              }
              if (response.data.data.buttonList.k001) {
                response.data.data.buttonList.k001.forEach(el=>{
                  buttonData.push(el.id)
                })
              }
              if (response.data.data.buttonList.k026) {
                response.data.data.buttonList.k026.forEach(el=>{
                  buttonData.push(el.id)
                })
              }
              if (response.data.data.buttonList.k036) {
                response.data.data.buttonList.k036.forEach(el=>{
                  buttonData.push(el.id)
                })
              }
              if (response.data.data.buttonList.k023) {
                response.data.data.buttonList.k023.forEach(el=>{
                  buttonData.push(el.id)
                })
              }
              let menu = response.data.data.menuList
              // let menu = this.menu
              // console.log(buttonData)
              this.$utils.setLocalStorage('buttonlist',buttonData)  //设置按钮缓存
              this.$utils.setLocalStorage('menulist',menu)  //设置菜单缓存
              this.$utils.setLocalStorage('curSubMenu',menu[0].children[0]) //默认当前二级菜单
              this.$utils.setLocalStorage('curMenu',menu[0]) //默认当前一级菜单
              this.$utils.setLocalStorage('user',response.data.data.user) //设置登录信息缓存
              this.$utils.setLocalStorage('serviceArea',response.data.data.serviceArea) //设置服务区域缓存
              this.$utils.setLocalStorage('usertoken',response.data.data.user.token) //设置用户token
              let home = this.$utils.setHomeInfo(menu)
              this.$router.addRoutes(home)
              this.$router.push({
                path: menu[0].children[0].url //登录成功跳转到第一个主菜单的第一个子菜单
              })
            }
            setTimeout(() => {
              this.loading = false
            }, 200);
          })
          
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },
  mounted () {
  }
}
</script>

<style>
.login-back{
	position: fixed;
	height: 100%;
	width: 100%;
}
.login-background{
  width: 100%;
  height: 400px;
  position: absolute;
  top: 0;
  background: #333 url(../../assets/image/loginback.png) no-repeat bottom left;
  background-size: 150%;
}
.copyright{
  position: absolute;
  width: 100%;
  bottom: 30px;
  font-size: 18px;
  color: #323232;
  text-align: center;
}
.svg-container{
  padding: 6px 5px 6px 15px;
    color: #889aa4;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
}
#loginForm .el-form-item{
  border: 1px solid rgba(255,255,255,0.1);
  background: #e5e5e5;
  border-radius: 5px;
  color: #454545;
}
#loginForm .el-form-item__content{
  line-height: 36px;
}
#loginForm  .el-input {
  display: inline-block;
  height: 47px;
  width: 85%;
}
#loginForm .el-input input{
  background: transparent;
  border: 0px;
  -webkit-appearance: none;
  border-radius: 0px;
  padding: 12px 5px 12px 15px;
  color: #333;
  height: 47px;
  caret-color: #fff;
}
#loginForm .el-input input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #e5e5e5 inset;
}
.show-pwd {
  position: absolute;
  right: 10px;
  top: 7px;
  font-size: 16px;
  color: #333;
  cursor: pointer;
} 
#loginForm .el-button{
  font-weight: 400;
}
</style>